import { useRequest } from '@umijs/hooks';
import { FileExcelOutlined } from '@ant-design/icons'
import {
    Button, Card, Tabs, Select,
    Form,
    Input,
    Layout,
    Menu,
    message,
    Popconfirm,
    Radio,
    Table,
    Tag,
    Tree,
    TreeSelect,
    Upload
} from 'antd';
import { Store } from 'rc-field-form/lib/interface';
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getOriginString, getSecretString } from '../../../../utils/encrypt';
import { fetchRequest } from '../../../../utils/Request';
import { url } from '../../../../utils/url';
import XLSX from 'xlsx';
import TableSetting from "../../../../components/TableSetting/TableSetting";
import actionType from "./addressActionType";


export default function AddCampus(props: any) {

    const { TabPane } = Tabs;
    const [currentKey, setCurrentKey] = useState('1');
    const [excelTableData, setExcelTableData] = useState<any[]>([]);
    const [batchAddDeptId, setBatchAddDeptId] = useState<any>('');
    const [batchAddList, setBatchAddList] = useState<any[]>([]);





    //获取redux中的数据
    const myData = useSelector((state: any) => {
        const data = state.addressManage.college_select
        disableSelect(data)
        return {
            college_select: data,
        }
    });
    console.log(myData)
    console.log(myData.college_select)



    //递归修改item的key
    function disableSelect(arr: any[],) {
        arr.map(item => {
            item.value = item.college_id
            item.title = item.collegeName
        })
    }
    const [form] = Form.useForm();
    const dispatch = useDispatch()
    const layout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
    };

    const tailLayout = {
        wrapperCol: { offset: 5, span: 14 },
    };


    function onFinish(value: Store) {
        console.log("value")
        console.log(value)
        const params = {
            collegeId: value.deptId.split('-')[0],
            collegeAreaName: value.campus
        };
        addNewAddress.run(params)

    }

    async function addNewAddressRequest(params: any) {
        console.log(params)
        try {
            const json = await fetchRequest(url.ADD_CAMPUS_INFORMATION, params);
            console.log(json)
            if (json.success) {
                message.destroy();
                message.success("新增成功!");
                props.addSuccess();
            } else {
                message.destroy();
                message.error(json.error);
            }
        }
        catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    const addNewAddress = useRequest(addNewAddressRequest, {
        manual: true,
        loadingDelay: 200
    })


    return (
        <div>
            <br />
            <br />
            <br />
            <div className="site-layout-background" style={{ minHeight: 380 }}>
                <Form form={form} {...layout} onFinish={onFinish} >

                    <Form.Item className="form-control-item" name="deptId" label="学校" rules={[{ required: true, message: '必须选择学校' }]}>
                        <TreeSelect className="search-form-item"
                            treeData={myData.college_select}
                            treeDefaultExpandAll placeholder="请选择学校" />
                    </Form.Item>
                    <Form.Item label="校区" name="campus" rules={[{ required: true, message: '必须输入校区' }]}>
                        <Input placeholder="请输入校区" />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit" loading={addNewAddress.loading}>提交</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )

}
